<template>
  <div class="index">
    <head-text titleText="售后管理"></head-text>
    <div class="list-content">
      <div class="filter-area">
        <Search :searchData="searchData" :searchItem="searchItem"></Search>
        <div class="operate-area">
          <el-button @click="exp" plain type="success" size="mini"
            >导出</el-button
          >
        </div>
      </div>
      <div class="table-title">
        <span></span>
        <h5>售后信息列表</h5>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        size="mini"
        v-if="hackReset"
      >
        <el-table-column type="index" width="50" align="center">
        </el-table-column>

        <el-table-column prop="customerName" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="customerPhone" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="orderSn" label="订单号" align="center">
        </el-table-column>
        <el-table-column
          prop="problemDescription"
          label="留言内容"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              style="margin: 5px"
              @click="view(scope.row.problemDescription)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="problemImg"
          label="留言图片"
          align="center"
          width="220"
        >
          <template slot-scope="scope">
            <div>
              <span
                v-for="(value, index) in imgArr(scope.row.problemImg)"
                :key="index"
              >
                <img :src="value" class="img-size" alt="" v-image-preview />
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="processStatus" label="处理状态" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.processStatus | processStatusFilter }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="requestType" label="处理请求" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.requestType | replyFilter2 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="replyType" label="处理结果" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.replyType | replyFilter }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="margin: 5px"
              plain
              size="mini"
              @click="operate(scope.row)"
              >售后处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <page
        :nowPage="nowPage"
        :total="total"
        :limit="limit"
        @pageChange="onPageChange"
        @sizeChange="onSizeChange"
      />
    </div>
    <el-dialog
      width="600px"
      title="售后处理"
      :visible.sync="innerVisible"
      append-to-body
    >
      <el-form
        status-icon
        ref="operateObj"
        :model="operateObj"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="处理类型：" prop="replyType">
          <el-radio-group v-model="operateObj.replyType" size="small">
            <el-radio
              v-for="(item, index) in replyStatusList"
              :key="index"
              :label="item.id"
              >{{ item.value }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="内容："
          prop="replyContent"
          v-if="operateObj.replyType == 4"
        >
          <el-input
            type="textarea"
            maxlength="10"
            show-word-limit
            v-model="operateObj.replyContent"
            placeholder="请输入内容"
            style="width:400px;"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateReply" size="mini"
          >确 定</el-button
        >
        <el-button @click="innerVisible = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="留言内容" :visible.sync="dialogVisible" width="600px">
      <el-form status-icon ref="form" :model="form" label-width="100px">
        <el-form-item label="留言内容：" prop="dialogValue">
          <el-input
            type="textarea"
            :autosize="{ minRows: 9 }"
            v-model="dialogValue"
            style="width:400px;"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { validateTemplateContent, validateTemplate } from "@u/validate";
import Search from "@c/search";
import { _debounce } from "@u/debounce";
import headText from "@c/headText";
import page from "@c/page";
import {
  getAfterServiceListApi,
  afterExportExcelApi,
  updateAfterServiceApi
} from "@s/api";
import {
  PROCESSSTATUSLIST,
  PROCESSSTATUS,
  REPLYSTATUS,
  REPLYSTATUSLIST,
  REPLYSTATUS2,
  REPLYSTATUSLIST2
} from "@u/wordbook";
export default {
  name: "index",
  data() {
    return {
      form: {},
      dialogVisible: false,
      dialogValue: "",
      nowPage: 1,
      total: 0,
      limit: 10,
      hackReset: true,
      innerVisible: false,
      value: "未处理",
      processStatusList: PROCESSSTATUSLIST,
      replyStatusList: REPLYSTATUSLIST,
      replyStatusList2: REPLYSTATUSLIST2,
      searchItem: [],
      searchData: {
        orderSn: "", //  订单编号
        customerPhone: "", // 用户手机号
        customerName: "", // 用户名
        processStatus: "", // 处理状态
        requestType: "", // 用户请求类型
        replyType: "" //  管理员处理类型
      },
      operateObj: {
        id: "",
        replyType: "",
        replyContent: ""
      },
      tableData: [],
      rules: {
        replyType: [
          { required: true, message: "请选择内容", trigger: "blur" },
          { validator: validateTemplate }
        ],
        replyContent: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { validator: validateTemplateContent }
        ]
      }
    };
  },
  components: {
    headText,
    page,
    Search
  },
  mounted() {
    this.getList();
  },
  created() {
    this.searchItem = [
      {
        type: "input",
        label: "订单号：",
        prop: "orderSn",
        placeholder: "请输入订单号"
      },
      {
        type: "input",
        label: "姓名：",
        prop: "customerName",
        placeholder: "请输入姓名"
      },
      {
        type: "input",
        label: "手机号：",
        prop: "customerPhone",
        placeholder: "请输入手机号"
      },
      {
        type: "select",
        label: "处理状态：",
        prop: "processStatus",
        placeholder: "请选择处理状态",
        selectList: this.processStatusList
      },
      {
        type: "select",
        label: "处理请求：",
        prop: "requestType",
        placeholder: "请选择处理请求",
        selectList: this.replyStatusList2
      },
      {
        type: "select",
        label: "处理结果：",
        prop: "replyType",
        placeholder: "请选择处理结果",
        selectList: this.replyStatusList
      }
    ];
  },
  //过滤器
  filters: {
    processStatusFilter(val) {
      return PROCESSSTATUS[val];
    },
    replyFilter(val) {
      return REPLYSTATUS[val];
    },
    replyFilter2(val) {
      return REPLYSTATUS2[val];
    }
  },
  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    imgArr(val) {
      let str = val;
      if (str) {
        str = str.split(",");
      }
      return str;
    },
    operate(val) {
      let json = {
        replyType: val.replyType,
        id: val.id,
        replyContent: val.replyContent
        // processStatus: 2 // 处理状态 ：已处理
      };
      this.operateObj = json;
      this.innerVisible = true;
    },
    updateReply: _debounce(function() {
      this.$refs["operateObj"].validate(valid => {
        if (valid) {
          this.innerVisible = false;
          // 判断是否为其他类型
          if (this.operateObj.replyType != 4) {
            this.operateObj.replyContent = "";
          }
          updateAfterServiceApi(this.operateObj).then(() => {
            this.$message({
              type: "success",
              message: "处理成功！"
            });
            this.getList();
          });
        }
      });
    }),
    // 搜索事件
    getDataList(val) {
      this.searchData = val;
      this.nowPage = 1;
      this.limit = 10;
      this.pageReset = false;
      this.$nextTick(() => {
        this.getList();
        this.pageReset = true;
      });
    },
    getList() {
      let json = JSON.parse(JSON.stringify(this.searchData));
      json.page = this.nowPage;
      json.limit = this.limit;
      getAfterServiceListApi(json).then(res => {
        this.hackReset = false;
        this.$nextTick(() => {
          this.tableData = res.list;
          this.total = res.total;
          this.hackReset = true;
        });
      });
    },
    exp: _debounce(function() {
      let json = JSON.parse(JSON.stringify(this.searchData));
      afterExportExcelApi(json, "售后信息表").then(() => {});
    }),
    view(val) {
      this.dialogValue = val;
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped lang="scss">
.img-size {
  width: 60px;
  margin: 0 2px;
  cursor: pointer;
}
</style>
